<template>
    <div>
        <el-button type="primary" @click="add()" style="margin-bottom: 20px;">添加分类</el-button>

        <!-- tree 插件方法 -->
        <!-- 分类表格   所有参数解释
                     :data(设置数据源)
                     :columns(设置表格中列配置信息)
                     :selection-type(是否有复选框)
                     :expand-type(是否展开数据)
                      show-index(是否设置索引列) 
                      index-text(设置索引列头)
                      border(是否添加边框) 
                     :show-row-hover(是否鼠标悬停高亮)-->
        <tree-table :data="categories" :columns="columns" :selection-type="false" :expand-type="false" show-index
            index-text="#" border :show-row-hover="false">
            <!-- 是否有效区域， 设置对应的模板列： slot="isOk"(与columns中设置的template一致) -->
            <template slot-scope="scope" slot="isOk">
                <i class="el-icon-success" style="color: #90ee90" v-if="scope.row.cat_deleted == 0"></i>
                <i class="el-icon-error" v-if="scope.row.cat_deleted == 1"></i>
            </template>
            <template slot-scope="scope" slot="sort">
                <el-tag type="primary" v-if="scope.row.cat_level == 0">一级</el-tag>
                <el-tag type="warning" v-if="scope.row.cat_level == 1">二级</el-tag>
                <el-tag type="danger" v-if="scope.row.cat_level == 2">三级</el-tag>
            </template>
            <template slot-scope="scope" slot="opt">
                <el-button size="mini" type="primary" @click="bj(scope.row)">
                    <i class="el-icon-edit">编辑</i>
                </el-button>
                <el-button size="mini" type="danger" @click="del(scope.row)">
                    <i class="el-icon-delete">删除</i>
                </el-button>
            </template>
        </tree-table>
        <!-- tree 插件方法 -->
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="from.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="from.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 添加分类 -->
        <el-dialog :title="`${flag == true ? '修改分类' : '添加分类'}`" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="ruleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择" style="width:100%">
                        <el-cascader v-model="value" :options="categories" :props="{ expandTrigger: 'hover',value: 'cat_id', label: 'cat_name'  }"
                            @change="handleChange"></el-cascader>
                    </el-select>
                </el-form-item>


                <el-form-item style="text-align:end">
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
</div>
</template>
<script>


import { getCategories, addCategories, deleteCategories } from '../untils/api'
export default {
    data() {
        return {
            flag: false,
            from: {
                type: '',
                pagenum: 1,
                pagesize: 10
            },
            total: 0,
            //表格数据
            categories: [],
            value:'',
            //columns(设置表格中列配置信息)
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isOk'
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'sort'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt'
                },
            ], ruleForm: {
                cat_pid: '',
                cat_name: '',
                cat_level: '',
            },
            dialogFormVisible: false,
            rules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],

            }

        }
    },
    methods: {
        add() {
            this.dialogFormVisible = true;
            this.flag = false

        },
        del(row) {
            console.log(row);
            deleteCategories({ id: row.cat_id, attrid: row.cat_pid }).then(res => {
                console.log(res);
            })
        },

        handleChange(value) {
            console.log(value);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.ruleForm);
                    // console.log(this.editId);
                    if (this.editId) {
                        shopGoods({ ...this.ruleForm, goods_cat: "1,2,3" }).then(res => {
                            // console.log(res);
                            this.page()
                            //   console.log(res);

                        })
                        this.flag = false
                        // return false
                    } else {
                        addCategories({ ...this.ruleForm }).then(res => {
                            // console.log(res);
                            this.page()

                        })
                    }
                    this.dialogFormVisible = false
                    this.$refs[formName].resetFields();

                    return false;
                } else {
                    console.log('error submit!!');
                    return false;
                }

            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //分页
        handleSizeChange(val) {
            this.from.pagesize = val
            this.page()
            this.pageQie()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.from.pagenum = val
            this.page()
            this.pageQie()
            // console.log(`当前页: ${val}`);
        },
        page() {
            getCategories(this.from).then(res => {
                console.log(res);
                this.total = res.data.data.length
                this.categories = res.data.data
            })
        },
        pageQie() {
            this.page()
            this.categories = this.categories.slice((this.from.pagenum - 1) * this.from.pagesize, this.from.pagenum * this.from.pagesize)
        }
    },
    created() {
        this.page()
        this.pageQie()
    }
}
</script>

